<template>
  <div class="botInfo">
    <div class="banner">
      <client-carousel arrows="never" height="400px" :url="banner" />
    </div>
    <div class="main">
      <div class="min-container" :class="{ 'min-detials': isTrue }">
        <client-title :title="title" class="content-title" :class="{ 'detial-title': isTrue }" />
        <div>面向丰富的业务场景，提供整套行业和技术解决方案，助力客户安全高效上云</div>
        <div class="learnMore">
          <span @click="handleCall">联系我们</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import ClientTitle from '@/components/client-title/client-title.vue'
import { getAssetURL } from '@/utils/load_assets'
import { useRouter } from "vue-router";
const router = useRouter();

const patherObj = defineProps({
  title: {
    type: String,
    default: '中酒云云网全栈解决方案'
  },
  bannerImg: {
    type: String,
    default: 'client/solution/banner.png'
  },
  isTrue: {
    type: Boolean,
    default: false
  }
})
const bannerUrl = getAssetURL(patherObj.bannerImg)
const banner = ref<any>([{ url: bannerUrl }]);


// 联系我们
const handleCall = () => {
  router.push("/client/others/aboutUs");
}
</script>
<style lang="less" scoped>
.botInfo {
  position: relative;
  margin-bottom: 0;
  background: #2066F4;

  .main {
    position: absolute;
    top: 0;
    width: 100%;

    .content-title {
      text-align: left;
      margin: 40px 0;
      color: #fff;
    }

    .min-container {
      margin-top: 70px;
      color: #fff;

      .learnMore {
        margin-top: 60px;
        color: #fff;

        span {
          padding: 10px 60px;
          transition: all 0.3s;
          background-color: #4098ff;

          &:hover {
            cursor: pointer;
            background-color: #66cafe;
            color: #ffffff;
          }

          &:active {
            background-color: #57b3e4;
          }
        }
      }
    }

    .detial-title {
      color: #333;
    }

    .min-detials {
      color: #333;
    }
  }
}
</style>
